<!--
 * @Author: LiZn
 * @Date: 2021-08-22 10:08:33
 * @LastEditTime: 2021-08-22 23:58:35
 * @LastEditors: LiZn
 * @Description: file content
 * @FilePath: \todaynews\src\components\loginMessage.vue
-->
<template>
  <div id="mes">
    <el-drawer
      :visible.sync="drawer"
      direction="btt"
      size="100%"
      @closed="closeTag"
      >
      <p class="topp">登陆头条，精彩永不丢失</p>
      <div class="loginclasss">
        <label for="usrename">用户名</label>
        <el-input 
          placeholder="请输入您的用户名"
          v-model="username"
          clearable
          label="usrename"
        ></el-input>
        <label for="password">密码</label>
        <el-input
          placeholder="请输入密码"
          v-model="password"
          show-password
          clearable
          label="password"
        >
        </el-input>
      </div>
        <el-button type="primary" round class="logintop" @click="userlogin">登录</el-button>
    </el-drawer>
  </div>
</template>

<script>
import store from '../store'
  export default {
    data(){
      return {
        drawer:true,
        username:'',
        password:''
      }
    },
    mounted(){

    },
    methods:{
      closeTag(){
        this.remove();
      },
      userlogin(){
        const _this = this;
        store.dispatch('user/login',{username:this.username,password:this.password}).then(res=>{
          if(res.code==2){
            store.dispatch("user/getUserInfo",res.data.token).then(res2=>{
              console.log(localStorage.getItem('username'))
               this.drawer = false;
               setTimeout(()=>{
                 this.remove()
               },1000)
            });
          }else{
            console.log(111)
            this.$message({
              message: res.message,
              type: 'warning'
            });
          }
        })
      }
    }
  }
</script>
<style scoped>
  #mes{
    text-align:center
  }
  .topp{
    font-size: 0.5rem;
  }
  .loginclasss{
    width:80%;
    display:flex;
    flex-direction:column;
    margin:0 auto;
    text-align:left;
    margin-top:1rem;
  }
  .loginclasss label:nth-child(3){
    margin-top:.5rem;
  }
  .logintop{
    margin-top:0.5rem
  }
</style>